<template>
  <div :class="{'succeed_mask': true, 'scale_mask': isSucceeful}">
    <div class="prompt">
      <div class="succeed_icon"></div>
      <div class="succeed_message" v-text="tips"></div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {}
    },
    props: ['tips', 'isSucceeful']
  }
</script>
<style scoped>
  .scale_mask {
    transition: transform 500ms;
    transform: scale(1) !important;
  }

  .succeed_mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    transform: scale(0);
  }

  .succeed_mask .prompt {
    width: 4.8rem;
    height: 3.1rem;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.2rem;
  }

  .succeed_mask .prompt .succeed_icon {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0.36rem auto 0.3rem;
    background: url('../../assets/images/login/handle-succeed.png') no-repeat;
    background-size: 100% 100%;
  }

  .succeed_mask .prompt .succeed_message {
    text-align: center;
    color: #333;
    font-size: 0.32rem;
  }
</style>
